<template>
  <div class="container">
    <div class="materiaAllType" v-if="showTree">
      <div class="typeLabel" @click="selectAll(0)">{{ title }}</div>
      <el-tree :data="menuList" :props="defaultProps" accordion @node-click="handleSelect"></el-tree>
    </div>
    <div class="materiaTable">
      <div class="process">
        <div>
          <el-button type="primary" @click="addEvent" v-if="process.indexOf('Add') !== -1">新增</el-button>
          <el-button
            type="primary"
            @click="watchEvent"
            v-if="process.indexOf('Monitor') !== -1"
          >库存监控</el-button>
          <el-button type="primary" @click="importEvent" v-if="process.indexOf('Import') !== -1">导入</el-button>
          <el-select
            v-model="selectValue"
            @change="optionChange"
            placeholder="请选择"
            v-if="process.indexOf('Select') !== -1"
          >
            <el-option
              v-for="(item, index) in optionList"
              :key="index"
              :label="item.Name"
              :value="item.Id"
            ></el-option>
          </el-select>
          <el-button
            type="primary"
            @click="highWatch"
            v-if="process.indexOf('highSelect') !== -1"
          >高级查询</el-button>
          <el-button type="primary" @click="setWatch" v-if="process.indexOf('set') !== -1">配置</el-button>
        </div>
        <div class="filter">
          <el-checkbox-group
            v-model="checked"
            @change="handleConditionChange"
            class="checkMargin"
            v-if="process.indexOf('check') !== -1"
          >
            <el-checkbox
              v-for="(item, index) in checkList"
              :key="index"
              :label="item.statu"
            >{{item.title}}</el-checkbox>
          </el-checkbox-group>
          <div class="search" v-if="process.indexOf('search') !== -1">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="searchKey"
              @change="handleInputChange"
            ></el-input>
            <el-button icon="el-icon-refresh" size="small" class="refresh" @click="refreshPage"></el-button>
          </div>
        </div>
      </div>
      <slot name="table"></slot>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        align="right"
        class="pagination"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import treeData from './tree.vue'
export default {
  name: '',
  data () {
    return {
      currentPage: 1,
      searchKey: '',
      selectValue: '',
      checked: [],
      currentActive: 0,
      defaultProps: {
        children: 'ChildNodes',
        label: 'Name',
      },
    };
  },
  props: {
    menuList: { //树形结构数据
      type: Array,
      default () {
        return []
      }
    },
    showTree: {
      type: Boolean,
      default: true
    },
    columns: { //表头
      type: Array,
      default () {
        return []
      }
    },
    title: { //左侧树形标题
      type: String,
      default: ''
    },
    page: { //左侧树形标题
      type: Number,
      default: 1
    },
    pageSize: { //左侧树形标题
      type: Number,
      default: 10
    },
    process: { //页面功能数组（新增等）
      type: Array,
      default () {
        return []
      }
    },
    optionList: { //下拉框选项列表
      type: Array,
      default () {
        return []
      }
    },
    selectVal: { //下拉框选项列表
      type: String,
      default: ''
    },
    checkList: { //复选框列表
      type: Array,
      default () {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    selectVal (newVal, oldVal) {
      this.selectValue = newVal
    }
  },
  methods: {
    selectAll (Id) {
      this.currentActive = 0
      let length = document.getElementsByClassName('subMenuIcon').length
      let length2 = document.getElementsByClassName('menuIcon').length
      for (let i = 0; i < length; i++) {
        document.getElementsByClassName('subMenuIcon')[i].classList.remove('activeMenu')
        document.getElementsByClassName('subMenuIcon')[i].nextElementSibling.classList.remove('activeMenu')
      }
      for (let i = 0; i < length2; i++) {
        document.getElementsByClassName('menuIcon')[i].classList.remove('activeMenu')
        document.getElementsByClassName('menuIcon')[i].nextElementSibling.classList.remove('activeMenu')
      }
      this.$emit('selectType', Id)
    },
    handleSelect (Id) {
      this.currentActive = 0
      // let length = document.getElementsByClassName('subMenuIcon').length
      // let length2 =  document.getElementsByClassName('menuIcon').length
      // for (let i = 0; i < length; i++) {
      //     document.getElementsByClassName('subMenuIcon')[i].classList.remove('activeMenu')
      //     document.getElementsByClassName('subMenuIcon')[i].nextElementSibling.classList.remove('activeMenu')
      // }
      // for (let i = 0; i < length2; i++) {
      //     document.getElementsByClassName('menuIcon')[i].classList.remove('activeMenu')
      //     document.getElementsByClassName('menuIcon')[i].nextElementSibling.classList.remove('activeMenu')
      // }
      // document.getElementById('menuIcon' + Id).classList.remove('defaultMenuIcon')
      // document.getElementById('menuIcon' + Id).nextElementSibling.classList.remove('defaultMenu')
      this.$emit('selectType', Id.Id)
    },
    handleOpen (Id) {
      this.currentActive = Number(Id)
      let length = document.getElementsByClassName('subMenuIcon').length
      let length2 = document.getElementsByClassName('menuIcon').length
      for (let i = 0; i < length; i++) {
        document.getElementsByClassName('subMenuIcon')[i].classList.remove('activeMenu')
        document.getElementsByClassName('subMenuIcon')[i].nextElementSibling.classList.remove('activeMenu')
      }
      for (let i = 0; i < length2; i++) {
        document.getElementsByClassName('menuIcon')[i].classList.remove('activeMenu')
        document.getElementsByClassName('menuIcon')[i].nextElementSibling.classList.remove('activeMenu')
        document.getElementsByClassName('menuIcon')[i].classList.add('defaultMenuIcon')
        document.getElementsByClassName('menuIcon')[i].nextElementSibling.classList.add('defaultMenu')
      }
      document.getElementById('subMenu' + Id).classList.add('activeMenu')
      document.getElementById('subMenu' + Id).nextElementSibling.classList.add('activeMenu')
      this.$emit('selectType', Id)
    },
    handleSizeChange (pageSize) {
      this.$emit('pageSizeToggle', pageSize)
    },
    handleCurrentChange (page) {
      this.$emit('pageToggle', page)
    },
    handlePrevClick (page) {
      this.$emit('pagePrev', page)
    },
    handleNextClick (page) {
      this.$emit('pageNext', page)
    },
    handleConditionChange (data) {
      this.$emit('statusChange', data)
    },
    handleInputChange (data) {
      console.log(data)
      this.$emit('inputChange', data)
    },
    refreshPage () {
      this.$emit('refreshPage')
    },
    handleClick (list) {
      console.log(list.Id)
    },
    // 点击新增
    addEvent () {
      this.$emit('addNew')
    },
    watchEvent () {
      this.$emit('addWatch')
    },
    importEvent () {
      this.$emit('importEvent')
    },
    highWatch () {
      this.$emit('highWatch')
    },
    setWatch () {
      this.$emit('setWatch')
    },
    optionChange (Id) {
      this.$emit('optionChange', Id)
    }
  },
  components: {
    treeData
  }
}

</script>
<style scoped lang="less">
.el-menu {
  border-right: none !important;
}

.container {
  width: 100%;
  height: calc(100vh - 51px);
  display: flex;
}

.materiaType {
  width: 100%;
  height: 100%;
  display: flex;

  .typeLabel {
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    cursor: pointer;
    border-bottom: 1px solid #e6e6e6;
  }

  .typeLabel:hover {
    background: rgb(236, 245, 255);
  }

  .typeLabel:active {
    background: #e6e6e6;
  }

  .materiaAllType {
    max-width: 200px;
    width: 200px;
    height: 100%;
    overflow-y: scroll;
    border-right: 1px solid #e6e6e6;
  }

  *::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 2px;
  }

  *::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    background-color: #e6e6e6;
  }

  .materiaTable {
    flex: 1;
    height: 100%;

    .process {
      height: 56px;
      line-height: 56px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;

      .checkMargin {
        margin-right: 20px;
      }

      .filter {
        display: flex;

        .search {
          display: flex;
          flex-direction: row;
        }

        .refresh {
          height: 40px;
          padding: 0;
          width: 40px;
          margin-top: 8px;
          margin-left: 10px;
        }
      }
    }
  }

  .pagination {
    margin-top: 40px;
    padding-right: 20px;
  }
}
</style>
<style lang="">
.headerClass th {
  background: #f5f5f5 !important;
  text-align: center !important;
}
</style>
